<template>
<div class="img2">
  <div class="container">
    <div class="row clearfix">
      <div class="col-md-4 column">
      </div>
      <div class="col-md-4 column">
          <div class="row clearfix">
            <div class="col-md-12 column">
              <form role="form">
                <div class="form-group">
                  <label>故障描述</label><input type="text" v-model="repairInfo" class="form-control" id="exampleInputEmail1" />
                </div>
                <div class="form-group">
                  <label>故障地址</label><input type="text" v-model="repairPath" class="form-control" />
                </div>
                <div class="form-group">
                  <label>学号</label><input type="text" v-model="studentId" class="form-control" />
                </div>
                <el-select v-model="value" placeholder="选择故障类型">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
                <br>
                <br>
                <div class="form-group">
                  <label>上传故障图片</label>
                  <el-upload
                      class="upload-demo"
                      drag
                      action="http://localhost:8099/student/upload"
                      :data={repairInfo:this.repairInfo,repairPath:this.repairPath,studentId:this.studentId}
                      multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                  <p class="help-block">
                  </p>
                </div>
                <div class="checkbox">
                </div> <button type="submit" class="btn btn-default" v-on:click="submit">提交</button>
              </form>
            </div>
          </div>
      </div>
      <div class="col-md-4 column">
      </div>
    </div>
  </div>
  <div class="img1">
  </div>
</div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      options: [{
        value: '教学楼故障',
        label: '教学楼故障'
      }, {
        value: '图书馆故障',
        label: '图书馆故障'
      }, {
        value: '宿舍楼故障',
        label: '宿舍楼故障'
      }, {
        value: '学校场所故障',
        label: '学校场所故障'
      }, {
        value: '实验室故障',
        label: '实验室故障'
      }],
      value: '',
      repairInfo : "",
      repairPath : "",
      repairType : "",
      studentId : ""

    }
  },
  methods: {
    submit(){
      this.$ajax.post(base_url + "/student/repair",{
        repairInfo : this.repairInfo,
        repairPath : this.repairPath,
        repairType : this.value,
        studentId : this.studentId
      }).then(response => {
          if (response.data.code == 200){
            alert("提交成功")
            this.repairType="提交成功";
          }else {
            alert("提交失败")
            this.repairType="提交失败";
          }
      })
    }

  }
}
</script>

<style scoped>
/* div{
	background-color: #C6E2FF;
	
} */
.button{
	background-color: #e7e7e7;
	color: black;
} 
.img1{
	position: absolute;
	background-image: url(../../img/1.jpg);
	height: 100px;
	width: 100px;
	top: 0;
	background-size: 100%;
	z-index: 100;
	border-radius: 50px;
	/* animation-name: A;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction:alternate;
	opacity: 0.5; */
	margin: 0px auto;
	display: block;
	animation: A 0.1s linear infinite;
	

}

/* @keyframes A
{
	0%   {top: 100px;}
	25%  {top: 300px;
	left: 600px;}
	50%  {top: 400px;
	left: 300px;}
	100% {top: 500px;
	left: 900px;}
} */



@keyframes A{
0%{
	transform: rotate(0deg);
}
100%{
	transform: rotate(360deg);
	}
}
.img2{
	position: absolute;
	background-image:url(../../img/5.gif);
	height: 100%;
	width:100%;
    z-index: 1000;
    opacity: 0.6;
	
}
.col-md-12{
	font-weight: bold;
	color: azure;
}
.el-upload__tip{
	font-weight: bold;
	color: azure;
}
.el-select{
	color: beige;
}
</style>